import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';
import 'package:situation/app/theme/gaps.dart';
import 'package:situation/domain/db/user_latlon_domain.dart';
import 'package:situation/resources/assets.dart';
import 'package:situation/widgets/mk_load_image.dart';

class MyMarkLayer extends StatefulWidget {
  const MyMarkLayer({super.key, required this.dataList});

  final List<UserLatlonDomain> dataList;

  @override
  State<MyMarkLayer> createState() => _MyMarkLayerState();
}

class _MyMarkLayerState extends State<MyMarkLayer> {
  @override
  Widget build(BuildContext context) {
    // 计算线段中点坐标
    LatLng _getLineCenter(List<LatLng> points) {
      final midIndex = (points.length / 2).floor();
      return points[midIndex];
    }

    // 计算多边形几何中心
    LatLng _getPolygonCenter(List<LatLng> points) {
      double latSum = 0, lngSum = 0;
      for (final p in points) {
        latSum += p.latitude;
        lngSum += p.longitude;
      }
      return LatLng(latSum / points.length, lngSum / points.length);
    }

    List<Widget> widgetList = [];
    for (final data in widget.dataList) {
      switch (data.type) {
        case 'point':
          widgetList.add(
            MarkerLayer(
              markers: [
                Marker(
                  point: data.list[0],
                  alignment: Alignment.topCenter,
                  width: 180,
                  height: 93,
                  child: Column(
                    children: [
                      Container(
                        alignment: Alignment.center,
                        width: 180,
                        padding: const EdgeInsets.all(8),
                        decoration: BoxDecoration(
                          color: Colors.black87.withAlpha(120),
                          borderRadius: BorderRadius.circular(10),
                        ),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text("名称：${data.name}", style: const TextStyle(
                                color: Colors.white, fontSize: 10),),
                            Text("经度：${data.list[0].latitude}",
                              style: const TextStyle(
                                  color: Colors.white, fontSize: 10),),
                            Text("纬度：${data.list[0].longitude}",
                              style: const TextStyle(
                                  color: Colors.white, fontSize: 10),),
                          ],
                        ),
                      ),
                      Gaps.vGap8,
                      MkLoadImage(Assets.mapMapPointActive, width: 30,),
                    ],
                  ),
                ),
              ],
            ),
          );
        case 'line':
          widgetList.add(
            Stack(
              // 使用 Stack 叠加线和文字
              children: [
                PolylineLayer(
                  polylines: [
                    Polyline(
                      points: data.list,
                      color: Colors.blue,
                      strokeWidth: 3,
                    ),
                  ],
                ),
                MarkerLayer(
                  markers: [
                    Marker(
                      width: 100,
                      height: 30,
                      point: _getLineCenter(data.list), // 计算线段中点坐标
                      child: Container(
                        padding: EdgeInsets.symmetric(
                          horizontal: 6,
                          vertical: 2,
                        ),
                        decoration: BoxDecoration(
                          color: Colors.black.withOpacity(0.8),
                          borderRadius: BorderRadius.circular(4),
                        ),
                        child: Center(
                          child: Text(
                            data.name, // 假设数据中有 name 字段
                            style: TextStyle(
                              color: Colors.blue,
                              fontSize: 12,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          );
        case 'area':
          final center = _getPolygonCenter(data.list);
          widgetList.add(
            Stack(
              children: [
                PolygonLayer(
                  polygons: [
                    Polygon(
                      points: data.list,
                      color: Colors.blue.withOpacity(0.3),
                      borderColor: Colors.blue,
                      borderStrokeWidth: 3,
                    ),
                  ],
                ),
                MarkerLayer(
                  markers: [
                    Marker(
                      width: 100,
                      height: 40,
                      point: center,
                      child: Container(
                        padding: EdgeInsets.symmetric(
                          horizontal: 8,
                          vertical: 4,
                        ),
                        decoration: BoxDecoration(
                          color: Colors.black.withOpacity(0.8),
                          borderRadius: BorderRadius.circular(4),
                        ),
                        child: Center(
                          child: Text(
                            data.name,
                            style: TextStyle(
                              color: Colors.white, // 调整文字颜色与背景对比
                              fontSize: 12,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          );
      }
    }

    return Stack(children: [...widgetList]);
  }
}
